<script setup>
import { useI18n } from 'vue-i18n'

const { t } = useI18n()

const model = ref({
  name: ''
})

const rules = {
  name: [
    {
      required: true,
      message: t('system.requireTip'),
      trigger: ['blur']
    }
  ],
  ip: [
    {
      required: true,
      message: t('system.requireTip'),
      trigger: ['blur']
    }
    // {
    //   validator: validatorIp,
    //   message: t('system.ipAddressFormat'),
    //   trigger: ['input']
    // }
  ]
}
</script>

<template>
  <div class="px-4">
    <n-card>
      <n-form ref="formRef" :model="model" :rules="rules" class="flex items-center flex-wrap">
        <n-form-item
          path="name"
          :label="t('alarm.phone')"
          class="w-full md:w-1/2 lg:w-1/3 xl:w-1/4 2xl:w-1/5 px-2 box-border"
        >
          <n-input />
        </n-form-item>
        <n-form-item
          path="name"
          :label="t('alarm.authorizationCode')"
          class="w-full md:w-1/2 lg:w-1/3 xl:w-1/4 2xl:w-1/5 px-2 box-border"
        >
          <n-input />
        </n-form-item>
      </n-form>
      <div class="flex justify-end">
        <n-button class="mr-2">{{ t('system.reset') }}</n-button>
        <n-button type="primary">{{ t('system.apply') }}</n-button>
      </div>
    </n-card>
  </div>
</template>

<style scoped></style>
